<template>
  <div class="home">
    <list v-for="item,index in list" :key="index" :item="item" @click="go(item,index)"></list>
  </div>
</template>

<script>
// @ is an alias to /src
import list from '@/components/list.vue'
import {useStore} from 'vuex'
import axios from 'axios'
import {ref,reactive,toRefs,computed} from 'vue'
import {useRouter} from 'vue-router'
export default {
//   name: 'HomeView',
  components: {
    list
  },
  setup(props){
    const {push} = useRouter()
    const {commit,state} = useStore()
    const data = reactive({
        list:computed(()=>state.list)
    })
    // vuex中的list为空的时候才发请求
    if(!state.list.length){
         axios.get('data.json').then(res=>{
        console.log(res);
        commit('setList',res.data)

    })
    }
   
    const go = (item,index)=>{
        push(`/about/${item.title}/${index}`)
         
    }
    return {...toRefs(data),go}

  }
}
</script>
